<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端开发 - 我的个人博客</title>
    <link rel="stylesheet" href="assets/css/normalize.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/article-list.css">
   
</head>
<body>
    <header>
        <nav class="main-nav">
            <div class="logo">
                <h1><a href="index.html">我的博客</a></h1>
            </div>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="frontend.html" class="nav-link active">技术分享</a>
                    <ul class="submenu">
                        <li><a href="frontend.html" class="active">前端开发</a></li>
                        <li><a href="backend.html">后端开发</a></li>
                        <li><a href="tools.html">开发工具</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a href="travel.html" class="nav-link">生活随笔</a>
                    <ul class="submenu">
                        <li><a href="travel.html">旅行日记</a></li>
                        <li><a href="food.html">美食推荐</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a href="profile.html" class="nav-link">关于我</a>
                    <ul class="submenu">
                        <li><a href="profile.html">个人简介</a></li>
                        <li><a href="contact.html">联系方式</a></li>
                    </ul>
                </li>
            </ul>
            <div class="nav-actions">
                <a href="publish.html" class="publish-btn-nav">发布文章</a>
                <button id="theme-toggle" class="theme-toggle">
                    <span class="light-icon">☀️</span>
                    <span class="dark-icon">🌙</span>
                </button>
            </div>
        </nav>
    </header>

    <main>
        <div class="category-header">
            <h2>前端开发</h2>
            <p>分享Web前端开发相关的技术文章和经验</p>
        </div>

        <div class="content-grid">
            <div class="main-content">
                <div class="search-box">
                    <input type="text" placeholder="搜索前端文章..." id="search-input">
                    <button type="button" id="search-btn">搜索</button>
                </div>

                <div>
                    <!-- 示例文章1 -->
                    <article class="article-card">
                        <a href="article.html" class="article-link">
                            <img src="https://picsum.photos/800/400?random=1" alt="React Hooks 最佳实践" class="article-image">
                            <div class="article-content">
                                <h3 class="article-title">React Hooks 最佳实践与性能优化</h3>
                                <div class="article-excerpt">
                                    <p>React Hooks 的出现让函数组件变得更加强大，本文将深入探讨 Hooks 的最佳实践和性能优化技巧。我们将通过实际案例，讲解 useState、useEffect、useMemo 和 useCallback 的正确使用方式，以及如何避免常见的性能陷阱。</p>
                                </div>
                                <div class="article-meta">
                                    <span class="article-date">2024-01-20</span>
                                    <span class="article-category">前端开发</span>
                                </div>
                                <div class="article-tags">
                                    <span class="tag">React</span>
                                    <span class="tag">Hooks</span>
                                    <span class="tag">性能优化</span>
                                </div>
                            </div>
                        </a>
                    </article>

                    <!-- 示例文章2 -->
                    <article class="article-card">
                        <a href="article.html" class="article-link">
                            <img src="https://picsum.photos/800/400?random=2" alt="现代CSS技巧" class="article-image">
                            <div class="article-content">
                                <h3 class="article-title">现代CSS技巧：Grid布局与响应式设计</h3>
                                <div class="article-excerpt">
                                    <p>CSS Grid 布局系统为网页设计带来了革命性的变化。本文将介绍 Grid 布局的核心概念，以及如何使用它创建复杂的响应式布局。我们还将探讨 Grid 与 Flexbox 的协同使用，以及一些实用的响应式设计技巧。</p>
                                </div>
                                <div class="article-meta">
                                    <span class="article-date">2024-01-18</span>
                                    <span class="article-category">前端开发</span>
                                </div>
                                <div class="article-tags">
                                    <span class="tag">CSS</span>
                                    <span class="tag">Grid</span>
                                    <span class="tag">响应式设计</span>
                                </div>
                            </div>
                        </a>
                    </article>

                    <!-- 示例文章3 -->
                    <article class="article-card">
                        <img src="https://picsum.photos/800/400?random=3" alt="TypeScript高级特性" class="article-image">
                        <div class="article-content">
                            <h3 class="article-title">TypeScript高级特性与工程实践</h3>
                            <div class="article-excerpt">
                                <p>TypeScript 不仅带来了类型安全，还提供了许多强大的高级特性。本文将深入探讨泛型、装饰器、类型推断等高级特性，以及在大型项目中的最佳实践。同时也会分享一些在实际项目中积累的经验和技巧。</p>
                            </div>
                            <div class="article-meta">
                                <span class="article-date">2024-01-15</span>
                                <span class="article-category">前端开发</span>
                            </div>
                            <div class="article-tags">
                                <span class="tag">TypeScript</span>
                                <span class="tag">前端工程化</span>
                                <span class="tag">最佳实践</span>
                            </div>
                        </div>
                    </article>

                    <!-- 示例文章4 -->
                    <article class="article-card">
                        <img src="https://picsum.photos/800/400?random=4" alt="Vue3 组合式API" class="article-image">
                        <div class="article-content">
                            <h3 class="article-title">Vue3 组合式API实战：从入门到精通</h3>
                            <div class="article-excerpt">
                                <p>Vue3 的组合式API为我们提供了更灵活的代码组织方式。本文将通过一个完整的项目实例，详细讲解组合式API的使用技巧，包括响应式系统、生命周期钩子、依赖注入等核心概念，以及如何构建可复用的组合式函数。</p>
                            </div>
                            <div class="article-meta">
                                <span class="article-date">2024-01-12</span>
                                <span class="article-category">前端开发</span>
                            </div>
                            <div class="article-tags">
                                <span class="tag">Vue3</span>
                                <span class="tag">组合式API</span>
                                <span class="tag">实战教程</span>
                            </div>
                        </div>
                    </article>
                </div>
            </div>

            <aside class="sidebar">
                <div class="about-widget widget">
                    <h3>关于博主</h3>
                    <img src="https://picsum.photos/150/150?random=10" alt="博主头像" class="avatar">
                    <p>热爱技术，专注前端开发的程序员。5年+工作经验，擅长React、Vue等前端框架，热衷于分享技术经验和学习心得。</p>
                    <div class="social-links">
                        <a href="https://github.com" target="_blank" class="social-link github">GitHub</a>
                        <a href="#" class="social-link weixin">微信</a>
                        <a href="mailto:example@email.com" class="social-link email">邮箱</a>
                    </div>
                </div>

                <div class="category-stats widget">
                    <h3>分类统计</h3>
                    <ul class="stats-list">
                        <li><span>前端开发</span><span>12篇</span></li>
                        <li><span>后端开发</span><span>8篇</span></li>
                        <li><span>开发工具</span><span>5篇</span></li>
                        <li><span>旅行日记</span><span>6篇</span></li>
                        <li><span>美食推荐</span><span>4篇</span></li>
                    </ul>
                </div>

                <div class="tags-widget widget">
                    <h3>标签云</h3>
                    <div class="tag-cloud">
                        <a href="#" class="tag-item" style="font-size: 1.6em">React</a>
                        <a href="#" class="tag-item" style="font-size: 1.4em">Vue</a>
                        <a href="#" class="tag-item" style="font-size: 1.5em">TypeScript</a>
                        <a href="#" class="tag-item" style="font-size: 1.3em">CSS</a>
                        <a href="#" class="tag-item" style="font-size: 1.2em">JavaScript</a>
                        <a href="#" class="tag-item" style="font-size: 1.1em">Node.js</a>
                        <a href="#" class="tag-item" style="font-size: 1.3em">性能优化</a>
                        <a href="#" class="tag-item" style="font-size: 1.2em">工程化</a>
                        <a href="#" class="tag-item" style="font-size: 1.1em">设计模式</a>
                    </div>
                </div>

                <div class="popular-posts widget">
                    <h3>热门文章</h3>
                    <ul class="popular-list">
                        <li class="popular-item">
                            <img src="https://picsum.photos/50/50?random=5" alt="热门文章配图" class="popular-image">
                            <div class="popular-content">
                                <h4>React Hooks 最佳实践</h4>
                                <span class="popular-views">阅读: 2,345</span>
                            </div>
                        </li>
                        <li class="popular-item">
                            <img src="https://picsum.photos/50/50?random=6" alt="热门文章配图" class="popular-image">
                            <div class="popular-content">
                                <h4>现代CSS技巧</h4>
                                <span class="popular-views">阅读: 1,892</span>
                            </div>
                        </li>
                        <li class="popular-item">
                            <img src="https://picsum.photos/50/50?random=7" alt="热门文章配图" class="popular-image">
                            <div class="popular-content">
                                <h4>TypeScript高级特性</h4>
                                <span class="popular-views">阅读: 1,567</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </aside>
        </div>
    </main>

    <footer>
        <p>&copy; 2024 我的个人博客. All rights reserved.</p>
    </footer>

    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="assets/js/article-list.js"></script>
</body>
</html> 